<template>
	<view>
		<view class="content">
			<!-- <image src="@/static/login/loginBg.png" class="loginBg"></image> -->
			<view class="from">
				<!-- <view class="pw-block">
					<view class="check-box-pw">
						<checkbox value="cb" color="#333333" checked="true" />记住密码
					</view>
					<view class="forget-pw" @click="forGetPw">忘记密码?</view>
				</view> -->
				<view class="hint-block">
					<view class="txt" style="font-size: 42rpx;">欢迎使用积分商城商户端</view>
				</view>
				<view class="hint-block">
					<view class="txt">请您绑定手机号码</view>
				</view>
				<view class="submit">
					<button class="btn btn-bind" :open-type='getPhoneNumber' @getphonenumber="decryptPhoneNumber"
						 >
						绑定手机号
					</button>
					
					<!-- <button class="btn btn-bind" v-else @click="decryptPhoneNumber">
						绑定手机号
					</button> -->
					<!-- <view class="check-login-fn" @click="loginTypeChange">{{loginType==0?'验证码登录':'密码登陆'}}</view> -->
				</view>
			</view>
			<!-- <view class="wx">
				<view class="hint-title">快捷登录</view>
				<image class="wx-icon" src="@/static/login/wx.png"></image>
			</view> -->
			<!-- <view class="hint">
				<evan-checkbox v-model="loginCheck" @change='loginCheckChange' primaryColor="#57BFCA"></evan-checkbox>
				<view style="margin-left: 14rpx;">绑定手机号及代表同意<span @click='userClick'>《用户协议》</span>和</view>
				<span @click='privacyClick'>《隐私政策》</span>
			</view> -->
		</view>
		<!-- <uv-code :seconds="seconds" @end="end" @start="start" ref="uvCode" @change="codeChange"></uv-code> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				seconds: 10,
				inputType: 'password',
				loginType: 0, //0密码登录 1验证码登录
				loginCheck: false,
				getPhoneNumber: 'getPhoneNumber'
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			loginCheckChange(e) {
				this.loginCheck = e
			},
			loginTypeChange() {
				if (this.loginType == 0) {
					this.loginType = 1
				} else {
					this.loginType = 0
				}
			},
			getCode() {
				if (this.$refs.uvCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.showToast({
							icon: "none",
							title: '验证码已发送'
						})
						// 通知验证码组件内部开始倒计时
						this.$refs.uvCode.start();
					}, 2000);
				} else {
					uni.showToast({
						icon: "none",
						title: '倒计时结束后再发送'
					})
				}
			},
			decryptPhoneNumber(e) {
				uni.showLoading({
					title: '请稍等...'
				});
				this.$http('common.wxMobile', {
					code: e.detail.code,
					token: this.$tools.getToken()
				}).then(res => {
					if (res.code == 200) {
						this.$tools.showMsg('绑定成功!')
						this.getUserInfo()
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}else{
						this.$tools.showMsg(res.msg)
					}
				})
			},
			getUserInfo() {
				this.$http('user.getUserInfo', {
					token: uni.getStorageSync('token')
				}).then(res => {
					console.log('getUserInfo res', res)
					this.userInfo = res.data.userInfo
					uni.setStorageSync('userInfo', res.data.userInfo)
				})
			},
			typeChange(val) {
				this.inputType = val
			},
			end() {
				uni.showToast({
					icon: "none",
					title: '倒计时结束'
				})
			},
			start() {
				uni.showToast({
					icon: "none",
					title: '倒计时开始'
				})
			},
			/**
			 * 忘记密码
			 */
			forGetPw() {
				uni.navigateTo({
					url: '/pages/forgetPw/forgetPw'
				})
			},
			userClick() {
				uni.navigateTo({
					url: '/pages/user/setting/agreement/agreement'
				})
			},
			privacyClick() {
				uni.navigateTo({
					url: '/pages/user/setting/privacy/privacy'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.bg {
		width: 100%;
		height: 464rpx;
	}

	button {
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: none;
		background-color: transparent;
	}

	button::after {
		border: none;
	}

	.content {
		position: relative;
		z-index: 111;
		// margin-top: -76rpx;
		padding: 0 70rpx;
		// background: #fff;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;

		.loginBg {
			position: absolute;
			right: 0;
			right: 0;
			top: -233rpx;
			width: 280rpx;
			height: 280rpx;
		}

		.from {
			.hint-block {
				display: flex;
				align-items: center;
				justify-content: center;
				// padding-top: 90rpx;
				flex-direction: column;

				.icon {
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
				}

				.txt {
					font-size: 34rpx;
					padding-top: 62rpx;
				}
			}

			.input-item {
				padding: 34rpx 0;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #EEEEEE;

				.tel {
					width: 44rpx;
					height: 44rpx;
					flex: none;
				}

				.border-block {
					flex: none;
					margin-left: 18rpx;
					width: 1rpx;
					height: 32rpx;
					background: #DEDEDE;
				}

				.input-class {
					flex: auto;
					font-size: 30rpx;
					padding-left: 24rpx;
				}

				.pw-show {
					flex: none;
					width: 38rpx;
					height: 16rpx;
				}
			}

			.submit {
				margin-top: 394rpx;
				// position: fixed;
				// bottom: 180rpx;
				// left: 50rpx;
				// right: 50rpx;

				.btn-bind {
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-size: 28rpx;
					height: 90rpx;
				}

				.check-login-fn {
					font-weight: 500;
					text-align: center;
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #FF6E15;
				}
			}

			.pw-block {
				margin-top: 24rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.check-box-pw {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.select-color {
		color: #55C7A6;
	}

	.adress-icon {
		position: fixed;
		right: 0;
		width: 480rpx;
		height: 480rpx;
		top: 150rpx;
		z-index: 999;
	}

	.wx {
		color: #020B00;
		font-size: 24rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 130rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.hint-title {
			text-align: center;
		}

		.wx-icon {
			margin-top: 44rpx;
			width: 80rpx;
			height: 80rpx;
		}
	}

	.hint {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #020B00;
		font-size: 24rpx;

		span {
			color: #57BFCA;
		}
	}

	.tips {
		color: #57BFCA;
		font-size: 24rpx;
		border: 2rpx solid #EEEEEE;
		border-radius: 8rpx;
		padding: 16rpx 22rpx;

	}
</style>